<template>
	<div class="goods-list">
<!-- 		<router-link class="goods-item" v-for="item in goodsList" :key="item.id" :to="'/home/goodsinfo/' + item.id" tag="div">
			<img :src="item.img_url" alt="">
			<h1 class="title">{{ item.title }}</h1>
			<div class="info">
				<p class="price">
					<span class="now">¥{{ item.sell_price }}</span>
					<span class="old">¥{{ item.market_price }}</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩{{ item.stock_quantity }}件</span>
				</p>
			</div>
		</router-link> -->

		<!-- 编程式导航 -->
		<!-- 在网页中, 有两种跳转方式 -->
		<!-- 方式1: 使用a标签的形式叫做 标签跳转 -->
		<!-- 方式2： 使用window.location.href的形式, 叫做 编程式导航 -->
		<div class="goods-item" v-for="item in goodsList" :key="item.id" @click="goDetail(item.id)">
			<img :src="item.img_url" alt="">
			<h1 class="title">{{ item.title }}</h1>
			<div class="info">
				<p class="price">
					<span class="now">¥{{ item.sell_price }}</span>
					<span class="old">¥{{ item.market_price }}</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩{{ item.stock_quantity }}件</span>
				</p>
			</div>
		</div>

		<mt-button type="danger" size="large" @click="loadMoreGoodsList">加载更多</mt-button>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui'
	export default {
		data(){
			// data是一个方法, 是往自己组件内部挂载一些私有数据的
			return {
				pageindex: 1,   //分页的页数
				goodsList:[]    //存放商品列表的数组
			}
		},
		created(){
			this.getGoodsList()
		},
		methods:{
			// 获取商品列表
			getGoodsList(){
				this.$http.get('api/getgoods?pageindex=' + this.pageindex).then(result => {
					if(result.body.status === 0){
						// this.goodsList = result.body.message
						// 第一页数据与第二页数据拼接
						this.goodsList = this.goodsList.concat(result.body.message)
					}else{
						Toast('获取商品列表失败')
					}
				})
			},
			//加载更多商品列表
			loadMoreGoodsList(){
				this.pageindex ++
				this.getGoodsList()
			},
			goDetail(id){
				//使用 JS 的形式进行路由导航
				
				//注意：一定要区分 this.$route 和 this.$router这两个对象的区别
				//其中： this.$route是路由[参数对象], 所有路由中的参数, params query都属于它
				//其中： this.$router 是一个路由[导航对象], 用它可以方便的使用 JS代码, 实现路由的前进、 后退、 跳转到新的URL地址

				//1. 最简单的
				// this.$router.push('/home/goodsinfo/' + id)
				// 2. 传递对象
				// this.$router.push( { path: '/home/goodsinfo/' + id } )
				// 3. 传递命名的路由
				this.$router.push( {name: 'goodsinfo', params:{ id } })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-list{
		display: flex;  /*flex布局*/
		flex-wrap: wrap;  /*让弹性盒元素在必要的时候拆行*/
		padding: 7px;
		justify-content: space-between;
		.goods-item{
			width: 49%;
			border: 1px solid #ccc;
			box-shadow: 0 0 8px #ccc;
			margin: 3px 0;
			padding: 2px;
			/*伸缩布局解决当标题是3行甚至是3行以上时，低于这些行数的底部info盒子下方会有空白的问题*/
			display: flex;
			flex-direction: column;   /*flex-direction属性决定主轴的方向（即项目的排列方向）*/
			justify-content: space-between;
			min-height: 293px;
			img{
				width: 100%;
			}
			.title{
				font-size: 14px;
			}
			.info{
				background-color: #eee;
				p{
					margin: 0;
					padding: 5px;
				}
				.price{
					.now{
						color: red;
						font-weight: bold;
						font-size: 16px;
					}
					.old{
						text-decoration: line-through;
						font-size: 12px;
						margin-left: 10px;
					}
				}
				.sell{
					display: flex;
					justify-content: space-between;
					font-size: 13px;
				}
			}
		}
	}
</style>